@import "~scss/variables";

$sw-context-button-color-text: var(--color-icon-primary-default);
$sw-context-button-border-radius: var(--border-radius-xs);
$sw-context-button-color-border: var(--color-border-primary-default);
$sw-context-button-color-disabled: var(--color-icon-primary-disabled);

.sw-context-button {
    display: inline-block;
    position: relative;
    color: $sw-context-button-color-text;

    &:focus-visible {
        outline: var(--scale-size-2) solid var(--color-border-brand-selected);
        outline-offset: var(--scale-size-2);
        border-radius: var(--border-radius-xs);

        .sw-context-button__button {
            border-color: $sw-context-button-color-border;
        }
    }

    &.is--disabled {
        .sw-context-button__button {
            color: var(--color-icon-primary-disabled);
            cursor: initial;

            &:hover,
            &.is--active {
                border: none;
            }
        }
    }

    .sw-context-button__button {
        color: $sw-context-button-color-text;
        background: 0 none;
        border: 1px solid transparent;
        border-radius: $sw-context-button-border-radius;
        cursor: pointer;
        height: var(--scale-size-24);
        line-height: $line-height-sm;
        padding: 0 var(--scale-size-8);
        outline: none;

        .mt-icon {
            width: 16px;
            height: 16px;
            padding-top: 5px;
            padding-right: 1px;
            padding-bottom: 5px;
            padding-left: 2px;
        }

        &:hover,
        &.is--active {
            border-color: $sw-context-button-color-border;
        }
    }

    &__menu-position {
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translate(-35px, 10px);
    }

    .mt-button {
        line-height: initial;
    }
}

.sw-popover__wrapper.sw-context-button__menu-popover {
    &.--placement-bottom-outside {
        .sw-context-menu {
            transform: translate(0, 13px);
        }

        .sw-context-menu .sw-context-menu__content::before {
            top: auto;
            bottom: -5px;
            transform: rotate(225deg);
        }
    }

    &.--placement-right-outside {
        .sw-context-menu {
            transform: translate(calc(-100% + 69px), 0);

            .sw-context-menu__content::before {
                left: unset;
                right: 28px;
            }
        }
    }

    &.--placement-right-outside.--placement-bottom-outside {
        .sw-context-menu {
            transform: translate(calc(-100% + 69px), 13px);
        }
    }
}
